<template>
  <div>
    <Card class="marginB10">
      <span class="marginR5">
        可开票金额：<span class="f_24 f_bold cBlue lineH1 relative" style="top:2px;">{{bill_money}}</span> 元
      </span>
      <span class=" cCCC pointer relative marginR20" @click="$app.alert('发票开票金额不包含“专利官费”，最小开票金额为 1000元。')">
        <Icon type="ios-help-circle-outline" size="20"/>
      </span>
      <Button type="default" size="small" class="marginR10" @click="$refs['InvoiceCan'].showBox=true" v-show="bill_money>0">查看明细</Button>
      <Button type="primary" size="small" class="marginR10" @click="sQit"  v-show="bill_money>=1000">立即开票</Button>

      
    </Card>
    <Card class>
      <Table
        :data="tableData"
        :columns="columns"
        stripe
        border
        class="marginB10"
        :loading="loading"
        :height="$app.winHeight-275"
      ></Table>
      <Page
        :total="total"
        show-sizer
        show-total
        show-elevator
        size="small"
        :page-size="pageSize"
        :page-size-opts="$app.pageAll.pageSizeOpts"
        :current="page"
        @on-change="loadMore"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
    
    <InvoiceCan  ref="InvoiceCan"/>
  </div>
</template>

<script>
import InvoiceCan from "@$@/_service/invoiceCan";
export default {
  name: "invoiceTo",
  components: {
    InvoiceCan
  },
  data() {
    let data = {
      tableData: [],
      columns: [],
      bill_money:0,
    };
    //分页相关
    let tool = {
      loading: true, //加载时显示转转
      total: 0, // 所有数据条数
      page: 1, // 当前页数
      pageSize: $app.pageAll.pageSize // 默认数据返回条数
    };

    return Object.assign(data, tool); // 对象合并
  },
  mounted() {
    this.getData();
  },

  methods: {
    // 申请开票
    sQit(){
      let {
        bill_money
      }=this;
      $app.confirm('可开票金额：<span class="f_24 f_bold cBlue">'+bill_money+'</span> 元','确认申请开票',{
        yesFun:()=>{
          $ajax.goKaiP(res=>{
          this.page = 1;
          this.getData();//更新列表数据
        });
        }
      });
    },
    getData() {
      let { pageSize, page } = this;

      // 清空原本的数据
      this.loading = true;
      this.columns = [];
      this.tableData = [];

      // 获取数据 type流水类型,1充值;2消费;3收益,4提现;0全部
      $ajax.wecTlist({ page, pageSize}, ({ data }) => {
        this.loading = false;
        this.bill_money=parseFloat(data.bill_money);//可申请开票金额

        this.columns = [
          {
            title: " ",
            type: "index",
            width: 30,
            align: "center ",
            className: "goOnTxt c999"
          },
          {
            title: "开票抬头",
            key: "company_name",
            className: "goOnTxt",
            resizable: true
          },
          {
            title: "纳税人识别号",
            key: "invoice_number",
            className: "goOnTxt",
            resizable: true,
            width: 160
          },
          {
            title: "开票金额(元)",
            className: "goOnTxt",
            resizable: true,
            width: 120,
            render: (h, params) => {
              let money = parseFloat(params.row.money);
              let out = [];
              out.push(h("span", money));
              return out;
            }
          },
          {
            title: "发票类型",
            className: "goOnTxt",
            resizable: true,
            key:"bill_type_name",
            width: 100,
          },
          {
            title: "发票性质",
            className: "goOnTxt",
            resizable: true,
            key:"bill_nature_name",
            width: 100,
          },
          {
            title: "申请开票时间",
            key: "created_at",
            className: "goOnTxt",
            width: 120,
            resizable: true
          },
          {
            title: "开票日期",
            key: "bill_date",
            className: "goOnTxt",
            width: 120,
            resizable: true
          },
          {
            title: "状 态",
            key: "state_name",
            className: "goOnTxt",
            width: 80,
            resizable: true
          },
          {
            title: "操作",
            className: "goOnTxt",
            resizable: true,
            render: (h, params) => {
              let{
                row:{
                  file_path,//下载路径
                  reason,//拒绝原因
                  state//发票状态,0已取消,1申请中,2已开票,3已拒绝
                }
              }=params;

              let out = [];

              if(state==0){
                out.push(h("span",{
                  class:'cCCC'
                },'已取消'));
              }else if(state==1){
                out.push(h("span",{
                  class:'cCCC'
                },'申请中'));
              }else if(state==2){
                out.push(h("span",{
                  class:'cBlue textLine',
                  on:{
                    click:()=>{
                      $app.openWindow(file_path)
                    }
                  }
                },'下载'));
              }else if(state==3){
                out.push(h("span",{
                  class:'cRed pointer',
                  on:{
                    click:()=>{
                      $app.alert(reason,'拒绝原因')
                    }
                  }
                },'查看'));
              }

              return out;
            }
          },
        ];

        this.tableData = data.list;
        this.total = data.total;
      });
    },
    // 加载更多
    loadMore(page) {
      this.page = page;
      this.getData();
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.page = 1;
      this.pageSize = pageSize;
      this.getData();
    }
  }
};
</script>

